<template>
  <div class="page-form pages">
    <div class="card">
      <a-form :form="form"
              style="width: 400px;margin: 0 auto;">
        <a-form-item label="密码">
          <a-input placeholder="请输入密码"
                   v-decorator="decorator.addBasic.email"
                   autocomplete="off"
                   maxlength="18" />
        </a-form-item>
        <a-form-item label="身份证号">
          <a-input placeholder="请输入身份证号"
                   v-decorator="decorator.addBasic.sfzh" />
        </a-form-item>
        <a-form-item label="下拉框">
          <a-select :options="approvalDict"
                    placeholder="请下拉选择"
                    v-decorator="decorator.addBasic.select"
                    allowClear />
        </a-form-item>
        <a-form-item label="时间">
          <a-date-picker valueFormat="YYYY-MM-DD"
                         v-decorator="decorator.addBasic.time" />
        </a-form-item>
        <a-form-item label="时间范围">
          <a-range-picker data-key="s,e"
                          format="YYYY-MM-DD HH:mm"
                          valueFormat="YYYY-MM-DD HH:mm"
                          v-decorator="decorator.addBasic.range" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary"
                    v-click='{func:handleSubmit,time:1000}'>提交</a-button>
          <a-button @click="onEcho"
                    style="margin-left: 12px;">回显</a-button>
        </a-form-item>
      </a-form>

    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import decorator from './decorator'
import GlobalMixin from '@/mixins/global'

export default {
  name: 'DemoForm', // 表单
  mixins: [GlobalMixin],
  data () {
    return {
      value: [],
      form: this.$form.createForm(this),
      // decorator: Object.freeze(decorator)
      decorator: this.$utils.stringUtils.deepCopy(decorator)
    }
  },
  computed: {
    ...mapState({
      approvalDict: state => state.dict.approvalState
    })
  },
  beforeMount () {
    // 获取字典项
    this.$store.dispatch('dict/fetchDict', 'approvalState')
  },
  methods: {
    // 回显
    onEcho () {
      const values = {
        email: '970426404@qq.com',
        password: '123456',
        select: '0',
        time: '2020-1-1',
        range: ['2020-1-1 00:00', '2020-2-12 00:00'],
        sfzh: '341224199210143032',
        asda: 'qweqwe'
      }
      this._setFieldsValue(this.form, values, {
        time: 'Moment',
        range: 'Moment'
      })
    },
    // 提交
    handleSubmit () {
      // this.form.validateFieldsAndScroll({ scroll: { offsetTop: 100 } }, (err) => {
      this.form.validateFields((err) => {
        if (!err) {
          let values = this._getFieldsValue(this.form)
          console.log(values)
        }
      })
    }
  }
}
</script>
